<template>
  <el-dialog :title="title"
             :visible.sync="visible"
             v-loading="loading"
             :before-close="modalClose"
             :close-on-click-modal="false"
             :close-on-press-escape="false"
             width="30%">
    <el-form ref="formRef"
             :model="formModel"
             :rules="formRules"
             label-width="140px">
      <el-form-item label="抵扣券名称："
                    prop="name">
        <el-input v-model="formModel.name"
                  placeholder="请输入抵扣券名称"
                  class="w-200"></el-input>
      </el-form-item>

      <el-form-item label="抵扣券金额："
                    prop="amount">
        <el-input v-model="formModel.amount"
                  placeholder="请输入抵扣券金额"
                  class="w-200"></el-input>
      </el-form-item>
      <el-form-item label="抵扣范围："
                    prop="range">
        <el-radio-group v-model="formModel.range">
          <el-radio :label="1">全场通用券</el-radio>
          <el-radio :label="2">项目抵扣券</el-radio>
        </el-radio-group>
        <div v-if="formModel.range === 2">
          <el-checkbox-group v-model="formModel.type"
                             @change="changeCheck">
            <el-checkbox v-for="item in typeList"
                         :key="item.value"
                         :label="item.value">{{item.label}}</el-checkbox>
          </el-checkbox-group>
        </div>
      </el-form-item>
    </el-form>
    <p align="center">
      <el-button @click="modalClose"
                 type="primary">取 消</el-button>
      <el-button @click="submitForm"
                 type="primary">保 存</el-button>
    </p>
  </el-dialog>

</template>
<script>
  export default {
    props: {
      dataObj: {
        type: Object,
        default: {}
      },
      visible: {
        type: Boolean,
        default: false
      },
    },
    name: 'buyMedicineDialog', // 购药回访权益配置
    data () {
      return {
        title: '新增抵扣券',
        loading: false,

        formModel: {
          id: null,
          name: '', // 抵扣券名称
          amount: '', // 抵扣券金额
          range: 2, // 抵扣范围
          type: [],
        },
        formRules: {
          name: [{ required: true, message: '请输入抵扣券名称', trigger: 'blur' }],
          amount: [{ required: true, message: '请输入抵扣券金额', trigger: 'blur' }],
          range: [{ required: true, message: '请选择抵扣范围', trigger: 'change' }]
        },
        typeList: [
          { value: 1, label: '健康风险查' },
          { value: 2, label: '居家监测' },
          { value: 3, label: '私人医生包' },
          { value: 4, label: '家庭医生包' },
          { value: 5, label: '单次咨询' },
          { value: 6, label: '新科技' },
        ]

      }
    },
    methods: {
      modalClose () {
        this.$emit('update:visible', false); // 直接修改父组件的属性
      },
      changeCheck (val) {
        console.log(val)
      },
      // 提交
      submitForm () {
        this.$refs['formRef'].validate((valid) => {
          if (valid) {
            console.log(this.formModel);
            return
            this.post(this.api.company.updateReadDoctorConfig, this.formModel).then(res => {
              if (res.data.code === '200') {
                this.$message.success('保存成功!');
                this.$parent.getList();
                this.modalClose();
              }
            })
          }
        })
      },
      getDetail () {
        this.post(this.api.company.getReadDoctorConfigDetail, {
          id: this.dataObj.id
        }).then(res => {
          if (res.data.code === '200') {
            let resData = res.data.object;
            this.formModel.id = resData.id;
          }
        })
      }
    },
    created () {
      if (this.dataObj) {
        this.getDetail();
        this.title = '编辑抵扣券';
      }
    },
  }
</script>
<style lang="scss" scoped>
</style>